<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现元素的拖动</title>
<style type="text/css">
img{
	position:absolute;
}
</style>
<script src="../vue.js"></script>
</head>
<body>
<div id="box">
    <img src="banner.jpg" v-move>
</div>
<script type="text/javascript">
var vm = new Vue({
	el:'#box',
    directives: {
        move: function (el) {
			//按下鼠标
			el.onmousedown = function(e) {
				var initX = el.offsetLeft;
				var initY = el.offsetTop;
				var offsetX = e.clientX - initX;
				var offsetY = e.clientY - initY;
				//移动鼠标
				document.onmousemove = function(e) {
					var x = e.clientX - offsetX;
					var y = e.clientY - offsetY;
					var maxX = document.documentElement.clientWidth - el.offsetWidth;
					var maxY = document.documentElement.clientHeight - el.offsetHeight;
					if(x <= 0) x = 0;
					if(y <= 0) y = 0;
					if(x >= maxX) x = maxX;
					if(y >= maxY) y = maxY;
					el.style.left = x + "px";
					el.style.top = y + "px";
					return false;
				}
			}
			//松开鼠标
			document.onmouseup = function() {
        		document.onmousemove = null;
    		}
        }
    }
})
</script>


</body>

</html>



